<template>
  <div v-loading="pageLoading" class="app-container">

    <el-row :gutter="40" class="top">
      <el-col :span="21" :offset="1">
        <div>
          <el-row :gutter="40">
            <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="mt-card">
              <h1 style="text-align: center">{{ title }}</h1>
              <div class="mt-info">
                <span style="color: gray">文章类别:</span><span style="margin-right: 20px">{{ category__name }}</span>
                <span style="color: gray">语言:</span><span style="margin-right: 20px">{{ language__name }}</span>
                <a
                  v-if="source"
                  :title="source__title"
                  style="margin-right: 20px"
                  class="mt-detail"
                  @click="handleRouteToSource"
                >文章翻译自</a>
                <span style="color: gray">作者:</span><span style="margin-right: 20px">{{ owner__username }}</span>
                <span>{{ update_at }}</span>
              </div>
              <div class="mt-info">
                <span style="color: gray">输出站点:</span>
                <a
                  v-for="(item, index) in webs"
                  :key="index"
                  :href="item.url"
                  class="mt-detail"
                  :title="item.name"
                  target="_blank"
                >{{ item.name }}</a>
              </div>
              <hr>
              <div style="font-size: 14px" v-html="content" />
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="mt-card">
              <div style="margin-bottom: 10px">快捷功能</div>
              <el-row type="flex" justify="space-around">
                <el-col :span="6">
                  <el-button type="primary" size="small">推广</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary" size="small" :disabled="!editable" @click="handleClickEdit">
                    编辑
                  </el-button>
                </el-col>
                <el-col :span="6">
                  <el-button
                    v-clipboard:copy="link"
                    v-clipboard:success="clipboardSuccess"
                    type="primary"
                    size="small"
                  >分享</el-button>
                </el-col>
              </el-row>
              <el-row v-if="topic_id">
                <topicmaterial
                  :topic_id="topic_id"
                  topic_title="文章素材"
                  :web-visible="materialVisible"
                  @closeMetrialDialog="materialVisible=false"
                />
              </el-row>
              <el-row>
                <div style="margin-bottom: 10px">文章分析</div>
                <div class="mt-article-analyze clearfix">
                  <i class="el-icon-picture" />
                  <span style="float: right;">{{ image_count }}</span>
                </div>

                <div class="mt-article-analyze clearfix">
                  <svg-icon icon-class="video" />
                  <span style="float: right;">{{ video_count }}</span>
                </div>

                <div class="mt-article-analyze clearfix">
                  <svg-icon icon-class="text" />
                  <span style="float: right;">{{ word_count }}</span>
                </div>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { Get as GetPosts } from '@/api/cms/post'
import clipboard from '@/directive/clipboard/index'
import Topicmaterial from './elements/topicmaterial' // use clipboard by v-directive

export default {
  components: { Topicmaterial },
  directives: {
    clipboard
  },
  data() {
    return {
      topic_id: '',
      materialVisible: false,
      pageLoading: false,
      content: '',
      update_at: '',
      owner__username: '',
      title: '',
      webs: [],
      source: null,
      source__title: '',
      project__name: '',
      category__name: '',
      language__name: '',

      image_count: 0,
      video_count: 0,
      word_count: 0,

      editable: true
    }
  },
  computed: {
    post_id: function() {
      return this.$route.params.post_id
    },
    link: function() {
      return window.location.href
    }
  },
  created() {
    if (this.post_id) {
      this.pageLoading = true
      GetPosts(this.post_id)
        .then(response => {
          this.project__name = response.data.project__name
          this.category__name = response.data.category__name
          this.language__name = response.data.language__name
          this.topic_id = response.data.topic_id
          this.source__title = response.data.source
          this.source = response.data.source
          this.webs = response.data.webs
          this.title = response.data.title
          this.editable = response.data.editable
          this.owner__username = response.data.owner__username
          this.update_at = response.data.update_at

          this.content = response.data.content
          this.pageLoading = false

          this.word_count = response.data.word_count
          this.video_count = response.data.video_count
          this.image_count = response.data.image_count
        })
        .catch(e => {
          this.pageLoading = false
        })
    } else {
      this.$push({ name: 'dashboard' })
    }
  },
  methods: {
    handleClickEdit() {
      this.$router.push({ name: 'editPostPut', params: { post_id: this.post_id }})
    },
    handleRouteToSource() {
      this.$router.push({ name: 'viewPost', params: { post_id: this.source }})
    },
    clipboardSuccess() {
      this.$message({
        message: '复制成功',
        type: 'success',
        duration: 1500
      })
    }
  }
}
</script>

<style scoped>
  .top {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 5px;
    margin-top: 28px;
  }

  .app-container {
    background: rgba(246, 246, 246, 0.9);
  }

  .app-container >>> h1 {
    font-size: 20px;
    font-weight: 600;
  }

  .place {
    visibility: hidden
  }

  .mt-article-analyze {
    display: block;
    padding: 10px 30px;
    border: 1px solid lightgray;
    font-size: 20px;
    color: gray;
  }

  .clearfix ::after {
    content: "";
    clear: both
  }

  .mt-detail:hover, .svg-icon:hover {
    cursor: pointer;
  }

  .mt-detail {
    color: #1976d2;
  }

  .mt-info {
    text-align: center;
    font-size: 14px;
    margin-bottom: 6px;
  }
</style>
